import React, { PureComponent } from 'react';
import { Icon, Form } from 'antd';
import { connect } from 'dva';
import "./form.less"
import "../../Common.less"
import { requestFullScreen, exitFull } from "../../utils/fullScreen"
class PinnerModal extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            roadlist: []
        }
        this.onConfirm = this.onConfirm.bind(this)
    }
    onConfirm(params = {}) {
        if (params.onSuccess) {
            params.onSuccess();
        }
    }
    componentDidMount() {
        const { extra,onLoaded } = this.props;
        if (onLoaded) {
            onLoaded(this)
        }
        let tdata = extra.tdata
        const len = tdata.length;
        let arr = [];
        let collen;
        for (let i = 0; i < len; i++) {
            let item = tdata[i];
            const elevations = item.elevations;
            const len2 = elevations.length;
            if (i == 0) {
                collen = len2
            }
            let obj = {
                id: item.id,
                station: item.station,
                position: item.position
            }
            for (let j = 0; j < len2; j++) {
                let item2 = elevations[j];
                obj['station' + j] = item2
            }

            arr.push(obj)
        }
        this.setState({
            collen,
            data: arr
        })
    }
    render() {
        const { data, collen, exit } = this.state;
        return (
            <div id="pinnerModal" style={{ height: "60vh", overflow: "auto" }} className="PinnerModal tableBoxS tcBox">
                {
                    !exit ? <Icon onClick={e => {
                        this.setState({
                            exit: true
                        })
                        requestFullScreen(document.querySelector(".ant-modal"))
                        document.querySelector(".PinnerModal").style.height = "calc(100vh - 85px)"
                        document.querySelector(".ant-modal-body").style.height = "calc(100vh - 70px)"
                    }} className="fullScreen" type="fullscreen" /> : <Icon onClick={e => {
                        this.setState({
                            exit: false
                        })
                        exitFull()
                        document.querySelector(".PinnerModal").style.height = "calc(70vh - 85px)"
                        document.querySelector(".ant-modal-body").style.height = "calc(70vh - 70px)"
                    }} className="fullScreen" type="fullscreen-exit" />
                }

                <table>
                    <tbody>
                        <tr className="th">
                            <td>位置</td>
                            <td>桩号</td>
                            {
                                Array.from(Array(collen), (item, index) => {
                                    return <td key={'th' + index}>垫石{index + 1}</td>
                                })
                            }

                        </tr>
                        {
                            data && data.length ? data.map((item, index) => {
                                return <tr key={'tr' + index}>
                                    <td>{item.position}</td>
                                    <td>{item.station} </td>
                                    {
                                        Object.keys(item).map((key, i) => {
                                            return key != "station" && key.includes("station") ? <td key={'td' + i}>{item[key]}</td> : undefined
                                        })
                                    }
                                </tr>
                            }) : undefined
                        }

                    </tbody>
                </table>
            </div>
        );
    }
}

export default connect(
    ({
        project: { current }
    }) => {
        return { project: current };
    },
    dispatch => ({
        loadProjectRoads: (values) => dispatch({
            type: 'refRoads/loadProjectRoads',
            payload: values
        }),

    })
)(Form.create('PinnerModal', {

})(PinnerModal));